<div class="form__wrapper">
  <div class="card">
    <div class="card-divider">
      <h2 class="card-title justify-between">
        <span class="text-black font-bold"><%= t("decidim.elections.admin.dashboard.questions.title") %></span>
        <%= link_to edit_questions_election_path(election), class: "flex items-end justify-between gap-x-3 text-sm" do %>
          <%= icon "pencil-line", class: "!w-4 !h-4" %>
          <%= t("actions.edit", scope: "decidim.admin") %>
        <% end %>
      </h2>
    </div>

    <div class="card-section">
      <div class="row column my-2">
        <% election_questions.limit(3).each do |question| %>
          <div class="card mb-4">
            <div class="row column">
              <h3 class="h6 my-2">
                <%= translated_attribute(question.body) %>
                <small class="font-normal ml-4"><%= t("decidim.forms.question_types.#{question.question_type}") %></small>
              </h3>
              <div><%= decidim_sanitize_admin translated_attribute(question.description) %></div>
              <h3 class="h6 mt-4 mb-2"><%= t("decidim.elections.admin.dashboard.questions.labels.answers") %>:</h3>
              <ul>
                <% question.response_options.each_with_index do |option, opt_index| %>
                  <li><%= "#{("a".ord + opt_index).chr})" %> <%= translated_attribute(option.body) %></li>
              <% end %>
              </ul>
            </div>
          </div>
        <% end %>

        <% if election.questions.count > 3 %>
          <p class="mt-4 text-gray-2"><%= t("decidim.elections.admin.dashboard.questions.limit_info") %></p>
        <% end %>
      </div>
    </div>
  </div>
</div>
